<template>
  <div id="main">
      <h1>
        {{blogtitle}}
      </h1>
      <div v-html="blogbody">
      </div>
      <hr>
      <div>一些评论们。。</div>
      <div v-for="commitlist in commitlists" :key="commitlist.commit.login">
          <img :src="commitlist.commit.avatar_url" width="80" height="80" :alt="commitlist.commit.login">
      <div>
          <b>{{commitlist.commit.login}}</b>
          评论于{{commitlist.commit.commit_at}}
      </div>
      <p>
          {{commitlist.commit.body}}
      </p>
      </div>
      <p>
        评论施工中。。。如果想要评论，请到<a :href="issueurl">这里</a>评论
      </p>
      <hr>

  </div>
</template>

<script>
import marked from "marked";
export default {
  data() {
    return {
      blogbody: "",
      blogtitle: "",
      commitlists: [],
      issueurl:""
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init: function() {
      var that = this;
      this.$http({
        method: "get",
        baseURL: this.blogurl,
        url: "https://api.github.com/repos/FireUnicornser/govBlog/issues/4"
      }).then(function(response) {
        that.blogbody = marked(response.data["body"]);
        that.blogtitle = response.data["title"];
      });
      this.commit()
    },
    
    commit: function() {
      
      var that = this;
      this.$http({
        method: "get",
        url:
          "https://api.github.com/repos/FireUnicornser/govBlog/issues/4/comments"
      }).then(function(response) {
          for (var i = 0; i < response.data.length; i++) {
            that.commitlists.push({
              commit: {
                avatar_url: response.data[i]["user"]["avatar_url"],
                login: response.data[i]["user"]["login"],
                commit_at: response.data[i]["created_at"],
                body: response.data[i]["body"]
              }
            });
          }
      });
    }
  }
};
</script>

<style>

</style>
